﻿<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Base.Master" Inherits="System.Web.Mvc.ViewPage(Of DailyReport.WorkloadTrendsCharViewModel)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    LineChar
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%
        dcWorkloadTrendsStore.Reader.Clear()
        
        '创建第一个DataField
        Dim njr As New JsonReader
        njr.Root = "data"
        njr.TotalProperty = "total"
        njr.Fields.Add("CheckDate")

        '创建第一个Column
        Dim nc As New Column With {.ColumnID = "CheckDate",
                                   .Header = "日期",
                                   .Width = 100,
                                   .DataIndex = "CheckDate"}
        gpBusiness.ColumnModel.Columns.Add(nc)
        
        For Each b In Model.Businesses.BusinessList
            '创建DataField
            njr.Fields.Add(b.Value)
            
            '创建Column
            nc = New Column With {.ColumnID = b.Value,
                                  .Header = b.Name,
                                  .Width = 60,
                                  .DataIndex = b.Value}
            gpBusiness.ColumnModel.Columns.Add(nc)
        Next
        dcWorkloadTrendsStore.Reader.Add(njr)
        
        Dim timeline As String = "["
        Dim md As String = "["
        
        For Each ts As DailyReport.WorkloadTrends In Model.ChartItems
            Dim tsd As Date
            Date.TryParse(ts.CheckDate, tsd)
            If tsd > Now Then
                Exit For
            End If
            Select Case Model.Grain
                Case DailyReport.DailyReportCommon.ReportGrain.Day
                    timeline += String.Concat("'", tsd.ToString("d日"), "',")
                Case DailyReport.DailyReportCommon.ReportGrain.Month
                    timeline += String.Concat("'", tsd.ToString("M月"), "',")
            End Select
           
        Next
        
        For i As Integer = 0 To Model.Businesses.BusinessList.Count - 1
            Dim td As String = "["
            For Each ts As DailyReport.WorkloadTrends In Model.ChartItems
                If ts.CheckDate > Now Then
                    Exit For
                End If
                td += String.Concat(ts.WorkloadTrendsItems(i).Count, ",")
            Next
            If td.EndsWith(",") Then
                td = td.Substring(0, td.Length - 1)
            End If
            td += "]"
            
            md += String.Concat("{name:'", Model.Businesses.BusinessList(i).Name, "',data:", td, "},")
        Next
        
        If timeline.EndsWith(",") Then
            timeline = timeline.Substring(0, timeline.Length - 1)
        End If
        If md.EndsWith(",") Then
            md = md.Substring(0, md.Length - 1)
        End If
        timeline += "]"
        md += "]"
        
        Dim reportType As String = "部门"
        If Not DailyReport.DailyReportCommon.MatchingPermission(DailyReport.DailyReportCommon.CurrentUserPermissions, DailyReport.DailyReportCommon.PermissionList.审核报表) Then
            reportType = DailyReport.DailyReportCommon.CurrentUserName
        End If
    %>
    <script type="text/javascript" language="javascript">
        var timeline = eval("<%=timeline %>");
        //debugger;
        var md = eval("<%=md %>");
        var _rangestart = new Date('<%= Model.RangeStart.toString("MM/dd/yyyy")%>');
        var _rangeend = new Date('<%= Model.RangeEnd.toString("MM/dd/yyyy")%>');
        var _reportType = '<%= reportType %>';
        var _level = '<%=ViewData("Level") %>';
        var _grain = <%= Model.Grain %> ;
        var _charTitle;
        switch (_grain) {
                case 1:
                    _charTitle = [formatCNDate(_rangestart), '至 ', formatCNDate(_rangeend), _reportType + formatVNLevel(_level) + '工作量走势图'].join(' ');
                    break;
                case 2:
                    _charTitle = [formatCNDateYM(_rangestart), '至 ', formatCNDateYM(_rangeend), _reportType + formatVNLevel(_level) + '工作量走势图'].join(' ');
                    break;
            }
        //debugger;
    </script>
    <script type="text/javascript" src="/content/jquery.PrintArea.js"></script>
    <ext:Viewport ID="ViewPort1" runat="server" Layout="fit">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Header="false" Border="false" AutoScroll="true">
                <TopBar>
                    <ext:Toolbar ID="toolbar1" runat="server">
                        <Items>
                            <ext:TabStrip ID="TabStrip1" runat="server">
                                <Items>
                                    <ext:TabStripItem ActionItemID="pnlChart" runat="server" Title="图表" />
                                    <ext:TabStripItem ActionItemID="pnlGrid" runat="server" Title="报表" />
                                </Items>
                            </ext:TabStrip>
                            <%--<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                            <ext:SelectBox ID="sltRange" runat="server" DisplayField="text" ValueField="value">
                                <Store>
                                    <ext:Store runat="server" ID="dcRange">
                                        <Proxy>
                                            <ext:HttpProxy runat="server" Url="/Setting/ReportRange.xml" />
                                        </Proxy>
                                        <Reader>
                                            <ext:XmlReader Record="item">
                                                <Fields>
                                                    <ext:RecordField Name="value" Mapping="@value" />
                                                    <ext:RecordField Name="text" Mapping="@text" />
                                                </Fields>
                                            </ext:XmlReader>
                                        </Reader>
                                        <Listeners>
                                            <Load Handler="sltRange.selectFirst();" />
                                        </Listeners>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <Select Fn="" />
                                </Listeners>
                            </ext:SelectBox>--%>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="btnPrint" runat="server" Text="打印图表" Icon="Printer">
                                <Listeners>
                                    <Click Handler="PrintChart();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="下载图表" Icon="Disk">
                                <Listeners>
                                    <Click Handler="ExportChart();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button1" runat="server" Text="打印报表" Icon="Printer">
                                <Listeners>
                                    <Click Handler="$(pnlGrid).printArea({ mode: 'popup', popClose: true,strict: true,showTitle: false });" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="pnlChart" runat="server" Header="false" BodyBorder="false" Frame="false">
                        <Content>
                            <div id="container" style="width: 100%; height: 500px; margin: 0 auto">
                            </div>
                        </Content>
                    </ext:Panel>
                    <ext:Panel ID="pnlGrid" runat="server" Header="false" BodyBorder="false" Frame="false"
                        Layout="FitLayout" AutoScroll="true">
                        <Content>
                            <ext:GridPanel ID="gpBusiness" runat="server" AutoExpandColumn="CheckDate" Header="false"
                                Border="false" TrackMouseOver="true" StripeRows="true" Layout="FitLayout" AutoScroll="true">
                                <Store>
                                    <ext:Store ID="dcWorkloadTrendsStore" runat="server" UseIdConfirmation="true">
                                        <Proxy>
                                            <ext:HttpProxy Url="/Day/WorkloadTrendsStore/" />
                                        </Proxy>
                                        <BaseParams>
                                            <ext:Parameter Name="rangeStart" Value="_rangestart" Mode="Raw" />
                                            <ext:Parameter Name="rangeEnd" Value="_rangeend" Mode="Raw" />
                                            <ext:Parameter Name="level" Value="_level" Mode="Raw" />
                                            <ext:Parameter Name="grain" Value="_grain" Mode="Raw">
                                            </ext:Parameter>
                                        </BaseParams>
                                        <%--<Reader>
                                            <ext:JsonReader IDProperty="id" Root="data" TotalProperty="total">
                                                <Fields>
                                                    <ext:RecordField Name="CheckDate" />
                                                    <ext:RecordField Name="一手登记" />
                                                    <ext:RecordField Name="一手交易" />
                                                    <ext:RecordField Name="二手登记" />
                                                    <ext:RecordField Name="二手交易" />
                                                    <ext:RecordField Name="预告登记" />
                                                    <ext:RecordField Name="一手立等" />
                                                    <ext:RecordField Name="二手立等" />
                                                    <ext:RecordField Name="地价" />
                                                    <ext:RecordField Name="验价" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>--%>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:RowNumbererColumn Width="25" Resizable="false" />
                                        <%--<ext:Column ColumnID="date" DataIndex="CheckDate" Header="日期" />
                                        <ext:Column ColumnID="data1" DataIndex="一手登记" Header="一手登记" Width="80"/>
                                        <ext:Column ColumnID="data2" DataIndex="一手交易" Header="一手交易" Width="80"/>
                                        <ext:Column ColumnID="data3" DataIndex="二手登记" Header="二手登记" Width="80"/>
                                        <ext:Column ColumnID="data4" DataIndex="二手交易" Header="二手交易" Width="80"/>
                                        <ext:Column ColumnID="data5" DataIndex="预告登记" Header="预告登记" Width="80"/>
                                        <ext:Column ColumnID="data6" DataIndex="一手立等" Header="一手立等" Width="80"/>
                                        <ext:Column ColumnID="data7" DataIndex="二手立等" Header="二手立等" Width="80"/>
                                        <ext:Column ColumnID="data8" DataIndex="地价" Header="地价" Width="80"/>
                                        <ext:Column ColumnID="data9" DataIndex="验价" Header="验价" Width="80"/>--%>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                </SelectionModel>
                                <LoadMask ShowMask="true" />
                                <SaveMask ShowMask="true" />
                            </ext:GridPanel>
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderArea" runat="server">
    <script type="text/javascript" src="/content/jquery.min.js"></script>
    <script type="text/javascript" src="/content/highcharts.js"></script>
    <script type="text/javascript" src="/content/modules/exporting.js"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline'
                },
                title: {
                    text: _charTitle,
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: timeline,
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            font: 'normal 10px Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '工作量（宗）'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: md,
                credits: {
                    enabled: false
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                exporting: {
                    enableImages: true,
                    filename: ['WorkloadTrendsChart_Output_', formatDate(_rangestart, ''), '_', formatDate(_rangeend, '')].join(''),
                    type: 'image/jpeg',
                    width: 1024
                }
            });
        });


        Highcharts.theme = {
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            chart: {
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                                    [0, 'rgb(255, 255, 255)'],
                                    [1, 'rgb(240, 240, 255)']
                                    ]
                },
                borderWidth: 0,
                plotBackgroundColor: 'rgba(255, 255, 255, 0)',
                plotShadow: false,
                plotBorderWidth: 1
            },
            title: {
                style: {
                    color: '#000',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                style: {
                    color: '#666666',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            xAxis: {
                gridLineWidth: 1,
                lineColor: '#000',
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '12px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                    }
                }
            },
            yAxis: {
                minorTickInterval: 'auto',
                lineColor: '#000',
                lineWidth: 1,
                tickWidth: 1,
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '12px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: 'black'

                },
                itemHoverStyle: {
                    color: '#039'
                },
                itemHiddenStyle: {
                    color: 'gray'
                }
            },
            labels: {
                style: {
                    color: '#99b'
                }
            }
        };

        // Apply the theme
        //var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    </script>
    <script type="text/javascript" language="javascript">
        //var _range = 1;
        function ExportChart() {
            chart.exportChart(null, {
                chart: {
                    backgroundColor: '#FFFFFF'
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                }
            });
        }

        function PrintChart() {
            chart.print();
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="StartupArea" runat="server">
</asp:Content>
